<html>
 
<head>
 <style type="text/css">

 

/*! CSS Used from: https://static12.51cto.com/edu/center/css/base.css?v=2.6.1 */
*{font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Microsoft Yahei",Arial,sans-serif;margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
ul{list-style:none;}
dl{-webkit-margin-before:0;-webkit-margin-after:0;}
a{text-decoration:none;color:#424242;}
a:hover{color:#000;}
textarea{resize:none;}
.blue{color:#00baf2;}
input,button{outline:none;font-size:14px;}
button{color:#FFF;background-color:#00baf2;line-height:30px;border:none;padding:0px 20px;cursor:pointer;}
button:hover{opacity:.9;}
.fl{float:left;}
.tc{text-align:center;}
.ml10{margin-left:10px;}
.tc{text-align:center;}
.fl{float:left;}
i.icon{background:url(https://static12.51cto.com/edu/center/images/icons.png?v=1) no-repeat;}
/*! CSS Used from: https://static12.51cto.com/edu/plugin/webuploader/webuploader.css */
.webuploader-container{position:relative;}
.webuploader-element-invisible{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);}
.webuploader-pick{position:relative;display:inline-block;cursor:pointer;text-align:center;overflow:hidden;width:100%;height:100%;}
/*! CSS Used from: https://static12.51cto.com/edu/center/css/create_class.css?v=1.0.8 */
button{border-radius:0;padding:0 20px;}
.edui-default .edui-editor-toolbarbox{line-height:1;}
.tips{width:20px;height:20px;position:relative;}
.tips i.Explain{display:block;line-height:20px;text-align:center;color:#FFF;background:orange;font-style:normal;margin-top:8px;cursor:pointer;}
.tips div{position:absolute;left:33px;box-shadow:0 0 3px #333;font-size:12px;background:#FFD;z-index:10;top:-20px;width:300px;padding:6px 10px;line-height:24px;display:none;}
.tips:hover div{display:block;}
.syList{position:relative;}
.syList>li{margin-bottom:10px;border:1px solid #DDD;padding:10px 20px;cursor:default;background:#FFF;width:1160px;display:inline-block;}
.syList>li.Chapter{font-size:20px;line-height:36px;margin-top:20px;min-height:36px;}
.syList>li.Lesson{margin-left:100px;font-size:14px;line-height:24px;color:#818181;width:1060px;min-height:24px;}
.syList>li>*{float:left;}
.syList>li>span{margin-right:5px;}
.syList>li.Lesson p.Title{position:relative;padding-right:30px;}
.syList>li i.icon{width:20px;height:21px;right:0;top:3px;position:absolute;}
.syList>li.video i.icon{background-position:-300px -100px;}
.syList>li>div.acts{float:right;font-size:14px;}
.syList>li>div.acts a{margin-left:10px;}
.syList>li>div.acts a.free{display:none;}
.syList>li:hover>div.acts a.free,.syList>li>div.acts a.free.show{display:inline;}
.syList>li.ADD{border:1px dashed #DDD;padding:0;width:1200px;}
.syList>li.ADD a{display:block;background:#F5F5F5;font-size:16px;text-align:center;color:#00baf2;float:none;padding:10px 20px;}
.syList>li.ADD a:hover{background:#EEE;}
.syList>li.ADD.Lesson{width:1100px;}
.syList>li.ADD.Lesson a{text-indent:-100px;}
.syList>li.Edit>dl{padding:20px 0;}
.syList>li.Edit>dl>*{float:left;line-height:32px;min-height:32px;margin-bottom:20px;}
.syList>li.Edit>dl>dt{width:80px;text-align:right;padding-right:20px;}
.syList>li.Edit>dl>dd{width:900px;}
.syList>li.Edit>dl>dd.Btns{text-indent:-80px;margin-bottom:0;text-align:center;}
.syList>li.Edit>dl>dd.Btns button{height:40px;width:120px;margin:10px 30px;font-size:18px;border:1px solid #00BAF2;text-align:center;text-indent:0;}
.syList>li.Edit>dl>dd.Btns button.white{color:#00BAF2;background:#FFF;}
.syList>li.Edit input[type='text'],.syList>li.Edit textarea{width:700px;height:30px;border:1px solid #DDD;line-height:30px;padding:0 10px;}
.syList>li.Edit textarea{line-height:20px;padding:6px 10px;line-height:20px;height:60px;display:block;}
.syList>li.Edit .Relation .a>*{float:left;margin-right:20px;}
.syList>li.Edit .Relation .b{display:none;}
.syList>li.Edit .Relation .b .progress{width:200px;height:10px;border:1px solid #DDD;margin-top:10px;display:none;}
.syList>li.Edit .Relation .b .progress div{height:10px;background:#00baf2;}
.syList>li.Edit .Relation .b p{line-height:32px;float:left;margin-right:20px;max-width:725px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.syList>li.Edit .Relation .b span{color:#00baf2;float:left;line-height:32px;margin-right:10px;cursor:pointer;}
.syList>li.Edit .Relation .b span.clear-file{color:#b02f29;}
.syList>li.Edit button.btn{height:32px;padding:0;width:100px;line-height:1;float:left;}
.syList>li.Edit div.btn{height:30px;width:100px;border:1px solid #999;color:#999;text-align:center;}

tr:after{content:"."!important;visibility:hidden!important;}
/*! CSS Used from: http://edu.51cto.com/static/js/ueditor1.4.3/themes/default/css/ueditor.css */
.edui-default .edui-box{border:none;padding:0;margin:0;overflow:hidden;}
div.edui-box{position:relative;display:-moz-inline-box!important;display:inline-block!important;vertical-align:top;}
.edui-default .edui-button-body,.edui-splitbutton-body,.edui-combox-body{position:relative;}
.edui-default .edui-toolbar{position:relative;}
.edui-default .edui-label{cursor:default;}
.edui-default .edui-toolbar{cursor:default;-webkit-user-select:none;-moz-user-select:none;padding:1px;overflow:hidden;zoom:1;width:auto;height:auto;}
.edui-default .edui-toolbar .edui-button,.edui-default .edui-toolbar .edui-splitbutton,.edui-default .edui-toolbar .edui-combox{margin:1px;}
.edui-default .edui-editor{border:1px solid #d4d4d4;background-color:white;position:relative;overflow:visible;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.edui-editor div{width:auto;height:auto;}
.edui-default .edui-editor-toolbarbox{position:relative;zoom:1;-webkit-box-shadow:0 1px 4px rgba(204, 204, 204, 0.6);-moz-box-shadow:0 1px 4px rgba(204, 204, 204, 0.6);box-shadow:0 1px 4px rgba(204, 204, 204, 0.6);border-top-left-radius:2px;border-top-right-radius:2px;}
.edui-default .edui-editor-toolbarboxouter{border-bottom:1px solid #d4d4d4;background-color:#fafafa;background-image:-moz-linear-gradient(top, #ffffff, #f2f2f2);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));background-image:-webkit-linear-gradient(top, #ffffff, #f2f2f2);background-image:-o-linear-gradient(top, #ffffff, #f2f2f2);background-image:linear-gradient(to bottom, #ffffff, #f2f2f2);background-repeat:repeat-x;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);*zoom:1;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.065);-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.065);box-shadow:0 1px 4px rgba(0, 0, 0, 0.065);}
.edui-default .edui-editor-toolbarboxinner{padding:2px;}
.edui-default .edui-editor-iframeholder{position:relative;}
.edui-default .edui-editor-bottomContainer{overflow:hidden;}
.edui-default .edui-editor-bottomContainer table{width:100%;height:0;overflow:hidden;border-spacing:0;}
.edui-default .edui-editor-bottomContainer td{white-space:nowrap;border-top:1px solid #ccc;line-height:20px;font-size:12px;font-family:Arial, Helvetica, Tahoma, Verdana, Sans-Serif;}
.edui-default .edui-editor-wordcount{text-align:right;margin-right:5px;color:#aaa;}
.edui-default .edui-editor-scale{width:12px;}
.edui-default .edui-editor-scale .edui-editor-icon{float:right;width:100%;height:12px;margin-top:10px;background:url(http://edu.51cto.com/static/js/ueditor1.4.3/themes/default/images/scale.png) no-repeat;cursor:se-resize;}
.edui-default .edui-toolbar .edui-for-fullscreen{float:right;}
.edui-default .edui-editor-toolbarmsg{background-color:#FFF6D9;border-bottom:1px solid #ccc;position:absolute;bottom:-25px;left:0;z-index:1009;width:99.9%;}
.edui-default .edui-editor-toolbarmsg-upload{font-size:14px;color:blue;width:100px;height:16px;line-height:16px;cursor:pointer;position:absolute;top:5px;left:350px;}
.edui-default .edui-editor-toolbarmsg-label{font-size:12px;line-height:16px;padding:4px;}
.edui-default .edui-editor-toolbarmsg-close{float:right;width:20px;height:16px;line-height:16px;cursor:pointer;color:red;}
.edui-default .edui-toolbar .edui-combox-body .edui-button-body{width:60px;font-size:12px;height:20px;line-height:20px;padding-left:5px;white-space:nowrap;margin:0 3px 0 0;}
.edui-default .edui-toolbar .edui-combox-body .edui-arrow{background:url(http://edu.51cto.com/static/js/ueditor1.4.3/themes/default/images/icons.png) -741px 0;_background:url(http://edu.51cto.com/static/js/ueditor1.4.3/themes/default/images/icons.gif) -741px 0;height:20px;width:9px;}
.edui-default .edui-toolbar .edui-combox .edui-combox-body{border:1px solid #CCC;background-color:white;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.edui-default .edui-toolbar .edui-combox-body .edui-splitborder{display:none;}
.edui-default .edui-toolbar .edui-combox-body .edui-arrow{border-left:1px solid #CCC;}
.edui-default .edui-toolbar .edui-button .edui-icon,.edui-default .edui-toolbar .edui-splitbutton .edui-icon{height:20px!important;width:20px!important;background-image:url(http://edu.51cto.com/static/js/ueditor1.4.3/themes/default/images/icons.png);background-image:url(http://edu.51cto.com/static/js/ueditor1.4.3/themes/default/images/icons.gif) \9;}
.edui-default .edui-toolbar .edui-button .edui-button-wrap{padding:1px;position:relative;}
.edui-default  .edui-for-bold .edui-icon{background-position:0 0;}
.edui-default  .edui-for-italic .edui-icon{background-position:-60px 0;}
.edui-default  .edui-for-underline .edui-icon{background-position:-140px 0;}
.edui-default  .edui-for-forecolor .edui-icon{background-position:-720px 0;}
.edui-default  .edui-for-backcolor .edui-icon{background-position:-760px 0;}
.edui-default  .edui-for-horizontal .edui-icon{background-position:-360px 0;}
.edui-default  .edui-for-source .edui-icon{background-position:-261px -0px;}
.edui-default  .edui-for-fullscreen .edui-icon{background-position:-100px -20px;}
.edui-default  .edui-for-simpleupload  .edui-icon{background-position:-380px 0px;}
.edui-default .edui-toolbar .edui-splitbutton-body .edui-arrow{background:url(http://edu.51cto.com/static/js/ueditor1.4.3/themes/default/images/icons.png) -741px 0;_background:url(http://edu.51cto.com/static/js/ueditor1.4.3/themes/default/images/icons.gif) -741px 0;height:20px;width:9px;}
.edui-default .edui-toolbar .edui-splitbutton .edui-splitbutton-body{padding:1px;}
.edui-default .edui-toolbar .edui-splitborder{width:1px;height:20px;}
.edui-default .edui-editor-messageholder{display:block;width:150px;height:auto;border:0;margin:0;padding:0;position:absolute;top:28px;right:3px;}
.edui-default .edui-toolbar .edui-colorbutton .edui-colorlump{position:absolute;overflow:hidden;bottom:1px;left:1px;width:18px;height:4px;}


.syList>li.Edit .radios{overflow:hidden;}
.syList>li.Edit .radios p{float:left;margin-right:50px;}
.syList>li.Edit .radios p i.icon{float:left;width:20px;height:20px;background-position:-100px -400px;position:static;margin-right:10px;margin-top:5px;}
.syList>li.Edit .radios p.cur i.icon{background-position:-100px -350px;}




 </style>

 
<link rel="stylesheet" type="text/css" href="./webuploader/webuploader.css">

    <script src="../js/jquery-1.7.2.min.js"></script>

    <script type="text/javascript" src="./webuploader/webuploader.js"></script>  
	<script type="text/javascript" src="./webuploader/upfile.js"></script>
    

    <script type="text/javascript">

$(document).ready(function(){
    //var data = $(".editChapter").attr("data")
     // 字符串转对象
    //var obj = eval('(' + data + ')');
    //alert( obj.chapterId)
    
	var uploader1 = newWebUploader('pickvideo'); 
	var uploader2 = newWebUploader('pickfile'); 
    

 


});


// 根据类型返回Li对象，jquery对象
function getLi(type) {
    if(type == 'addChapter') {
        dom = $('<li class="Chapter ADD addChapter"><a href="javascript:void(0); "  onclick="addChapterLi(this)" >+添加章节</a></li>');
    } else if(type == 'showChapter') {
        dom = $('<li class="Chapter showChapter"><input type="hidden" class="status" value="chapter-39872" /><span>第一章</span><p class="Title">11</p><div class="acts"><a href="javascript:void(0);">编辑</a><a href="javascript:void(0);">删除</a></div></li>');
    } else if(type == 'editChapter') {
        dom = $('<li class="Chapter Edit editChapter"><span>第一章</span><input type="text" class="Title" placeholder="最多不能超过30字" maxlength="30" /><div class="acts"><a href="javascript:void(0);" onclick="editChapterLi(this)" >保存</a><a href="javascript:void(0);">取消</a></div></li>')
    } else if(type == 'addLesson') {
        dom = $('<li class="Lesson ADD addLessson"><a href="javascript:void(0);">+添加课时</a></li>')
    } else if(type == 'showLesson') {
        dom = $('<li class="Lesson video showLesson"><input type="hidden" class="status" value="lesson-399540-review"><span>1.</span><p class="Title">1111111111111</p><div class="acts"><a href="javascript:void(0);">编辑</a><a href="javascript:void(0);">删除</a></div></li>')
    } else if(type == 'editLesson') {
        dom = $('.editLesson')
    }
    return dom
}

function editChapterLi(obj) {
        $li = $(obj).parent().parent()
        $li.hide()
        $li.after(getLi('addChapter'))
        $li.after(getLi('addLesson'))
        $li.after(getLi('showChapter'))   
        $li.remove()

}

function addChapterLi(obj) {
    $li = $(obj).parent()
    $li.hide()
    $li.after(getLi('editChapter'))
    $li.remove()
}


    
    </script> 
 
</head>
 

 
<body>
  
  <ul class="syList" id="syList">

  
  <li class="Chapter ADD addChapter"><a href="javascript:void(0); "  onclick="addChapterLi(this)" >+添加章节</a></li>

  <!--  

  <li class="Chapter showChapter"><input type="hidden" class="status" value="chapter-39872"><span>第一章</span><p class="Title">11</p><div class="acts"><a href="javascript:void(0);">编辑</a><a href="javascript:void(0);">删除</a></div></li>

  <li class="Chapter Edit editChapter" >
      <span>第一章</span>
      <input type="text" class="Title" placeholder="最多不能超过30字" maxlength="30">
      <div class="acts"><a href="javascript:void(0);">保存</a><a href="javascript:void(0);">取消</a>
    </div></li>


  <li class="Lesson ADD addLessson"><a href="javascript:void(0);">+添加课时</a></li>
  

  <li class="Lesson video showLesson"><input type="hidden" class="status" value="lesson-399540-review"><span>1.</span><p class="Title">1111111111111</p><div class="acts"><a href="javascript:void(0);">编辑</a><a href="javascript:void(0);">删除</a></div></li>


   

  <li class="Lesson Edit editLesson" >
   <dl>
    <dt>
     课时
    </dt>
    <dd>
     <input type="text" must="" name="title" placeholder="最多不能超过30字" maxlength="30" />
    </dd>
 
    <dt>
        是否免费
       </dt>
       <dd>
            <div id="isFreeDiv">               
                    <label for="isfree0">否</label>
                    <input type="radio" name="isfree" id="isfree0" checked=true  value="0">  
                        &nbsp; &nbsp; &nbsp; &nbsp;
                    <label for="isfree1">是</label>
                    <input type="radio" name="isfree" id="isfree1"  value="1"> 
            </div>
       
    </dd>


    <dt>
     视频
    </dt>
    <dd class="Relation">
     <div class="a with-video">
      
        <div  >
             <span id="pickvideo"  class="btn link" >上传视频</span>
             
        </div> 
      
      </div>
       
     </div>
     <div class="b">    
      
      <span class="clear-file">清除</span>
      <span class="preview" style="display:none;">预览</span>
     </div>
    </dd>
    <dt>
     资料
    </dt>
    <dd class="Relation">
    
            <div>
                    <span id="pickfile"  class="btn link" >上传文件</span>
                  
             </div> 

     <div class="b"> 
      <span class="clear-file">清除</span>
     </div>
    </dd>
    
     
    <dd class="Btns tc">
     <button class="white">取消</button>
     <button>保存</button>
    </dd>
   </dl>
   
  </li>  
  
 -->

  
  </ul>
  </body>
</html>